<template>
  <div class="qckc">
    <header>
      <div class="header-right">
        <p>用户姓名：xxxx</p>
        <p>账户手机号：18100000000</p>
        <div class="address">
            <p>押金地址：</p>
            <div class="detail">
                <p>金炜龙,13581308299</p>
                <p>湖北省XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
            </div>
        </div>
      </div>
    </header>
    <div class="content">
        <el-table :data="tableData" style="margin:0 0 30px 0">
        <el-table-column
          prop="date"
          label="收据编号"
          align="center"
          width="320"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="押金总计"
          align="center"
          width="320"
        >
        </el-table-column>
        <el-table-column prop="address" align="center" label="备注 ">
        </el-table-column>
        <el-table-column  label="操作 "  align="center">
            <template >
                <div>
                   <el-button
                    @click="centerDialogVisible = true"
                  type="text"
                  size="small"
                  >编辑备注</el-button>
                </div>
               
              </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
      </div>
    </div>

    <el-dialog
  title="编辑备注"
  :visible.sync="centerDialogVisible"
  width="30%"
  >
  <p>收据编号： YXXXXXXX</p>

    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="备注: " :rows="5" style="margin:10px 0 0 -30px">
            <el-input type="textarea" v-model="desc"></el-input>
        </el-form-item>
    </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
        centerDialogVisible: false,
        desc:"",
      tableData: [
        {
          date: "XXXXXXXX",
          name: "共缴纳： 押桶 3/桶 押金数 20.00/元",
          address: "额外抵押一台饮水机",
          

        },
        {
          date: "XXXXXXXX",
          name: "共核销： 押桶 3/桶 押金数 20.00/元",
          address: "客户损坏桶一个",
          

        },
        {
          date: "XXXXXXXX",
          name: "共核销： 押桶 3/桶 押金数 20.00/元",
          address: "饮水机已退回",
          

        },

      ],

    };
  },
  methods: {
      fanhui(){
          this.$router.back()
      }
  },
};
</script>

<style lang="scss" scoped>
.qckc {
  width: 98%;
  overflow: hidden;
  margin: 1%;
  overflow: hidden;


  header {
    width: 100%;
    height: 80px;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0 4%;

    .header-right {
        width: 60%;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        margin: 0;
        .address{
            display: flex;
            .detail{
                line-height: 20px;
            }
        }
    }
  }
  .content {
    width: 100%;
    // height: 500px;
    overflow: hidden;
    background-color: #fff;
    .p1 {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #bbb;
      padding: 0 4%;
    }

    .fenye {
      width: 100%;
      margin: 80px 0 30px 0;
      .el-pagination,
      .is-background {
        float: right;
        margin-right: 4%;
      }
    }
  }
}
</style>